<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>备忘录</title>
    <!-- vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
    <!-- element-ui -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/locale/zh-CN.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet">
    <!-- moment -->
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.30.1/moment.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.30.1/locale/zh-cn.js"></script>
    <!-- custom -->
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js" defer></script>
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <div class="header">
            <div class="title">备忘录</div>
            <div class="add">
                <el-button @click="addItem">+</el-button>
            </div>
        </div>
        <!-- 列表 -->
        <div class="list">
            <div class="item" @click="updateItem(item)" v-for="item in sortList">
                <div class="time">{{item.time}}</div>
                <div class="content">{{item.content}}</div>
            </div>
        </div>
        <el-dialog :title="nowEditItem.id?'修改事项':'新增事项'" :visible.sync="dialogTableVisible">
            <el-form label-width="80px">
                <el-form-item label="事项时间">
                    <el-date-picker format="yyyy/MM/dd" value-format="yyyy/MM/dd" type="date"
                        v-model="nowEditItem.time"></el-date-picker>
                </el-form-item>
                <el-form-item label="事项内容">
                    <el-input v-model="nowEditItem.content"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button type="danger" v-if="nowEditItem.id" @click="remove">删除</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

</body>

</html>